<script setup lang="ts">
import { request } from '@/api'
import { showToast } from 'vant'
import { onMounted, ref, watch } from 'vue'
import { useRouter } from 'vue-router'

const addressList = ref<AddressItem[]>([])
const getAddressData = async () => {
  const res = await request.get('/member/address')
  addressList.value = res.data.result
  // addressList.value.reverse() 数组反转
  // const IdList0 = addressList.value.filter((item) => {
  //   return item.id === '0'
  // })
  // const IdList1 = addressList.value.filter((item) => {
  //   return item.id !== '0'
  // })
  // addressList.value = IdList0.concat(IdList1)
  const idList0 = addressList.value.pop()
  addressList.value.unshift(idList0!)
}
onMounted(async () => {
  getAddressData()
})
watch(
  () => addressList.value,
  () => {
    getAddressData()
  },
  {
    deep: true,
    immediate: true,
  },
)
// 修改默认

interface DefaultParams {
  isDefault: 0 | 1
}
const data: DefaultParams = {
  isDefault: 0,
}

const onChangeDefault = async (id: string) => {
  const res = await request.put(`/member/address/${id}`, data)
  console.log(res)
  showToast('修改默认成功')
}

// 删除
const onDelAddress = async (id: string) => {
  await request.delete(`/member/address/${id}`)
  showToast('删除成功')
}

// 下拉刷新
const loading = ref(false)
const onRefresh = async () => {
  loading.value = true
  await getAddressData()
  loading.value = false
  showToast('刷新成功')
}
// 编辑
const router = useRouter()
const goEdit = (index: number) => {
  router.push({
    path: '/address/edit',
    query: { id: addressList.value[index].id },
  })
}
</script>

<template>
  <div class="address-manager-page">
    <van-pull-refresh v-model="loading" @refresh="onRefresh">
      <van-swipe-cell v-for="(item, index) in addressList" :key="item.id">
        <div class="item">
          <div class="item-wrapper">
            <div class="item-area">
              <span class="item-tag" v-show="item.isDefault === 0"> {{ '默认' }}</span>
            </div>
            <div class="item-address">{{ item.address }}</div>
            <div class="item-connect">{{ item.receiver + ' ' + item.contact }}</div>
          </div>
          <div class="item-edit">
            <van-icon
              name="edit"
              size="20"
              color="var(--mk-gray)"
              @click="goEdit(index)"
            ></van-icon>
          </div>
        </div>
        <template #right>
          <van-button square type="primary" style="height: 100%" @click="onChangeDefault(item.id)">
            设为<br />默认
          </van-button>
          <van-button
            square
            type="danger"
            style="height: 100%"
            text="删除"
            @click="onDelAddress(item.id)"
          />
        </template>
      </van-swipe-cell>
    </van-pull-refresh>

    <div class="submit">
      <van-button round block type="primary" to="/address/edit"> 新建地址 </van-button>
    </div>
  </div>
</template>

<style lang="css" scoped>
.address-manager-page {
  padding: 8px;
  width: 100%;
  min-height: 100vh;
  position: relative;
  padding-bottom: 80px;
}

.submit {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 16px;
  height: 80px;
}

.item {
  min-height: 108px;
  width: 100%;
  background-color: var(--mk-white);
  border-radius: 2px;
  display: flex;
  margin-bottom: 8px;
}

.item-wrapper {
  padding: 16px;
  flex: 1;
}

.item-area {
  font-size: 14px;
  color: var(--mk-text);
  margin-bottom: 5px;
}

.item-tag {
  display: inline-block;
  border-radius: 4px;
  width: 40px;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  color: var(--mk-white);
  text-align: center;
  background-image: linear-gradient(90deg, var(--mk-linear_begin), var(--mk-linear_end));
  margin-right: 4px;
}

.item-address {
  font-size: 16px;
  color: var(--mk-black);
  font-weight: 500;
  margin-bottom: 5px;
}

.item-connect {
  font-size: 12px;
  color: var(--mk-text);
}

.item-edit {
  width: 48px;
  display: flex;
  align-items: center;
}

.btn-group {
  height: 100%;
  width: 100px;
  display: flex;
}
</style>
